<template>
	<view class="box">
        <view class="box-1">
            <navigator url="/pages/ItemClassify/ItemClassify">
              <view class="box-1-1">
                <view>
                  <image src="https://img1.baidu.com/it/u=4118280267,4271263127&fm=253&fmt=auto&app=120&f=PNG?w=171&h=165"></image>
                </view>
                <view>
                  <view>我要体检</view>
                  <view class="line">机构套餐 随心选择</view>
                </view>
              </view>
            </navigator>
            <!-- <view class="box-1-1" @click="myappointment">
              <view>
                <image src="https://img1.baidu.com/it/u=4118280267,4271263127&fm=253&fmt=auto&app=120&f=PNG?w=171&h=165"></image>
              </view>
              <view>
                <view>我的预约</view>
                <view class="line">按需加项 更改日期</view>
              </view>
            </view> -->
            <view class="box-1-1" @click="myreport">
            <view>
              <image src="https://img1.baidu.com/it/u=4118280267,4271263127&fm=253&fmt=auto&app=120&f=PNG?w=171&h=165"></image>
            </view>
              <view>
                <view>我的报告</view>
                <view class="line">报告管理 趋势分析</view>
              </view>
            </view>
            <!-- <view class="box-1-1">
              <view>
                <image src="https://img1.baidu.com/it/u=4118280267,4271263127&fm=253&fmt=auto&app=120&f=PNG?w=171&h=165"></image>
              </view>
              <view>
                <view>报告解读</view>
                <view class="line">在线医生 答疑解惑</view>
              </view>
            </view> -->
        </view>
        <view class="box-2">
          <text class="line1">推荐机构</text>
          <navigator open-type="switchTab" url="/pages/CheckPlace/CheckPlace"><text >更多</text></navigator>
        </view>
        <view class="box-3">
          <scroll-view enable-flex scrollX class="scrollBox1">
              <view class="item" @click="toOrgan" v-for="(v,i) in organizationoList" :key="i">
              <!-- <u-icon name="star" size="60" color="#FFFF00"></u-icon> -->
              <image :src="v.org_image">
              </image>
              <view class="line1">{{v.org_name}}</view>
              <view class="line2">100个套餐</view>
            </view>
          </scroll-view>
        </view>
        <view class="box-4">
          <text class="line1">推荐套餐</text>
          <navigator open-type="switchTab" url="/pages/Project/Project"><text>更多</text></navigator>
        </view>
        <view class="box-5">
          <scroll-view enable-flex scrollX class="scrollBox2">
              <view class="item"  v-for="(v,i) in packagesList" :key="i" @click="toProjectInf(v.productId)">
              <u-icon @tap.native.stop="select" :name="isSelect?'star-fill':'star'" size="70" color="#FFFF00"></u-icon>
              <image :src="v.com_img">
              </image>
              <view>{{v.com_proName}}</view>
              <view class="line2">{{v.org_name}}</view>
              <view><text>￥{{v.com_presentPrice}}</text><text class="oldPrice">￥{{v.com_originalPrice}}</text></view>
            </view>
          </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      //收藏星星的状态
      isSelect: false,
//所有套餐的数组
      packagesList:[],
//所有机构的数组
      organizationoList:[],
    };
  },
  onLoad() {},
  methods: {
//收藏星星的点击事件
    select(i) {
      this.isSelect = !this.isSelect;
      // console.log(i, this.isSelect);
    },
    myappointment() {
//我的预约
      uni.navigateTo({
        url: "/pages/HXM/MineBooked/MineBooked",
      });
    },
    myreport() {
//我的报告
      uni.navigateTo({
        url: "/pages/HXM/MyReport/MyReport",
      });
    },
//点击进入单个套餐详情介绍
    toProjectInf(id){
      console.log(999,id);
      uni.navigateTo({
        url: "/pages/ProjectInf/ProjectInf?id="+id,
      });
    },
//点击进入单个机构详情
    toOrgan(){
      uni.navigateTo({
        url: "/pages/Organ/Organ",
      });
    },
//获取所有的套餐信息
    getAllPackages(){
      this.$http({
        url:'/getAllPackages',
      }).then((res)=>{
        // console.log(999,res.data);
        this.packagesList=res.data
        console.log('获取到的所有套餐信息',this.packagesList);
      })
    },
//获取所有机构的信息
    getAllOrganization(){
      this.$http({
        url:'/getAllOrganization',
      }).then((res)=>{
        console.log('所有的机构',res.data)
        this.organizationoList=res.data
      })
    }
  },
  mounted(){
    this.getAllPackages();
    this.getAllOrganization();
  }
};
</script>

<style lang="less" scope>
.box {
  margin: 10rpx 15rpx;
}
.box-1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .box-1-1 {
    // padding-right:10rpx;
    margin: 10rpx 0;
    height: 120rpx;
    width: 350rpx;
    background: rgb(230, 224, 224);
    box-shadow: 6rpx 6rpx 6rpx 6rpx rgb(194, 164, 164);
    // border: 1rpx solid blue;
    display: flex;
    justify-content: space-around;
    align-items: center;

    image {
      width: 100rpx;
      height: 100rpx;
    }
    .line {
      font-size: 24rpx;
      color: rgb(160, 156, 156);
    }
  }
}
.box-2,
.box-4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0;
  padding: 10rpx 0;
  // border: 1rpx solid blue;

  .line1 {
    font-size: 50rpx;
  }
}
.scrollBox1 {
  height: 400rpx;
  // border: 1rpx solid blue;
  display: flex;
  flex-wrap: nowrap;

  .item {
    width: 280rpx;
    flex-shrink: 0;
    margin-right: 15rpx;
    position: relative;
    // border: 1rpx solid yellow;

    u-icon {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }

    image {
      width: 280rpx;
      height: 280rpx;
    }

    .line1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 15rpx;
    }

    .line2 {
      color: rgb(182, 178, 178);
      margin: 10rpx;
    }
  }
}
.scrollBox2 {
  height: 500rpx;
  // border: 1rpx solid blue;
  display: flex;
  flex-wrap: nowrap;

  .item {
    width: 350rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    position: relative;
    // border: 1rpx solid yellow;

    u-icon {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }

    image {
      width: 350rpx;
      height: 350rpx;
    }

    view {
      margin-top: 7rpx;
    }

    .line2 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgb(151, 136, 136);
      font-size: 30rpx;
    }

    .oldPrice {
      color: rgb(151, 136, 136);
      margin-left: 30rpx;
      text-decoration: line-through;
      font-size: 30rpx;
    }
  }
}
</style>

